<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" han-content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/hanzimu.css">
    <title>22003170129韩梓慕</title>
    
</head>

<body>
  <header>
    <nav class="han-head">
        <div class="han-top">
          <div id="han-logo"><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E9%A1%B9%E7%9B%AE%E6%95%B4%E4%BD%93/index.html"></a></div>
          <!-- 顶部导航栏 -->
          <ul class="han-list">
              <li><a href="#" class="han-item active">发现音乐</a></li>
              <li><a href="#">我的音乐</a></li>
              <li><a href="#">关注</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fifth.html">商城</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/sixth.html">音乐人</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fourth.html">个人设置</a></li>
              <li class="han-hot"></li>
          </ul>
          <!-- 右侧搜索框以及用户登录区域 -->
          <ul class="han-right-list">
            <li class="han-search-wrap"><input type="search" placeholder="音乐/视频/电台/用户"></li>
            <li><a href="#">创作者中心</a></li>
            <li><a href="#">登录</a></li>
          </ul>
        </div>
    </nav>

    <nav class="han-middle-nav">
        <div class="han-inner">
            <ul>
            <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/second.html">推荐歌单</a></li>
            <li><a href="#">排行榜</a></li>
            <li><a href="#">云推歌</a></li>
            <li><a href="#">主播电台</a></li>
            <li><a href="#">歌手</a></li>
            <li><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </nav>
</header>

  <article class="han-art">
    <div class="han-pagetwo-gridbox">
      <h2>歌单推荐</h2>
      <div>
          <a href="http://www.baidu.com">
              <img src="./img/4.jpg">
              <div class="han-pagetwo-mask"></div>
          </a>
          <p>《飞》</p>
      </div>
      <div>
          <a href="#">
              <img src="./img/5.jpg">
              <div class="han-pagetwo-mask"></div>
          </a>
          <p>《飞》</p>
      </div>
      <div>
          <a href="#">
              <img src="./img/1.jpg">
              <div class="han-pagetwo-mask"></div>
          </a>
          <p>《飞》</p>
      </div>
      <div>
          <a href="#">
              <img src="./img/3.jpg">
              <div class="han-pagetwo-mask"></div>
          </a>
          <p>《飞》</p>
      </div>
      <div>
          <a href="#">
              <img src="./img/6.jpg">
              <div class="han-pagetwo-mask"></div>
          </a>
          <p>《飞》</p>
      </div>
      <div>
          <a href="#">
              <img src="./img/2.jpg">
              <div class="han-pagetwo-mask"></div>
          </a>
          <p>《飞》</p>
      </div>
  </div>
  </article>

  <main class="han-category-info"> 
    <div class="han-category-infos">
      <h2>日落加州｜顶级浪漫｜在橘子海感受温暖</h2>
      <h2>歌曲列表</h2>
      <div class="han-content">
        <div>
          <p>简介：当梦幻感的粉橘悄悄染上天空，整个城市被柔和的光线笼罩着，在这里，人们可以找到与音乐和情感相契合的地方，可以尽情地享受音乐带来的快乐和激情。
            对落日爱好者来说，生活在拥有粉色晚霞的城市里，每天都被围绕在触手可及的浪漫下，是一件无比温暖且幸福的事情</p>
        </div>
        <div class="han-text">
          <li class="han-autnor">创建者：小小</li>
          <li class="han-date">创建时间：2024/11/28</li>
          <a href="">夏季</a>
          <a href="">夜晚</a>
        </div>
        <div class="han-music-list">
          <ul>
            <div>
              <h4 class="song-names">歌曲名</h4>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/third.html">《我好想你》</a></li>
              <li><a href="#">《爱你》</a></li>
              <li><a href="#">《你别走》</a></li>
              <li><a href="#">《我好想你》</a></li>
              <li><a href="#">《爱你》</a></li>
            </div>
            <div>
              <h4 class="song-times">歌曲时长</h4>
              <li class="time">03：55</li>
              <li class="time">04：33</li>
              <li class="time">03：55</li>
              <li class="time">04：33</li>
              <li class="time">03：55</li>
            </div>
            <div>
              <h4 class="song-singers">歌手</h4>
              <li class="singer"><a href="">Jenevieve</a></li>
              <li class="singer"><a href="">Jenevieve</a></li>
              <li class="singer"><a href="">Jenevieve</a></li>
              <li class="singer"><a href="">Jenevieve</a></li>
              <li class="singer"><a href="">Jenevieve</a></li>
            </div>
          </ul>
        </div>
        <img src="./img/sunset.jpg" alt="日落加州">
      </div>
    </div>

    <div class="han-category-playlists">
      <h2>『置身旷野』寂静 幽美 于绿色山谷之间</h2>
      <h2>歌曲列表</h2>
      <div class="han-content">
        <div>
          <p>简介：在生活中 一切回归本真，珍惜内心的无事安宁，回归自我，回归自我明朗的生活状态，追寻内心世界的自由，置身旷野，在天空下肆意狂奔，
            旷野的风从胸膛呼啸而过，此刻我应该是自由的。</p>
        </div>
        <div class="han-text">
          <li>创建者：孤岛</li>
          <li>创建时间：2024/09/24</li>
          <a href="">欧美</a>
          <a href="">放松</a>
          <a href="">治愈</a>
        </div>
        <div class="han-music-list">
          <ul>
            <div>
              <h4>歌曲名</h4>
              <li><a href="#">《我好想你》</a></li>
              <li><a href="#">《爱你》</a></li>
              <li><a href="#">《你别走》</a></li>
              <li><a href="#">《我好想你》</a></li>
              <li><a href="#">《爱你》</a></li>
            </div>
            <div>
              <h4>歌曲时长</h4>
              <li>03：55</li>
              <li>04：33</li>
              <li>03：55</li>
              <li>04：33</li>
              <li>03：55</li>
            </div>
            <div>
              <h4>歌手</h4>
              <li><a href="">Jenevieve</a></li>
              <li><a href="">Jenevieve</a></li>
              <li><a href="">Jenevieve</a></li>
              <li><a href="">Jenevieve</a></li>
              <li><a href="">Jenevieve</a></li>
            </div>
          </ul>
        </div>
        <img src="./img/wild.jpg" alt="置身旷野">
      </div>
      </div>
  </main>

  <footer>
    <p>&copy; 2024 网易云音乐示例版权所有</p>
  </footer>
  
  <script>
    var gridbox = document.querySelector(".han-pagetwo-gridbox");
    var links = gridbox.querySelectorAll("a");

    for(var i=0;i<links.length;i++){
        /*鼠标悬浮时事件*/
        links[i].onmouseover=function(){
            for(var j=0;j<links.length;j++){
                links[j].children[1].style.display='block';
            }
            this.children[1].style.display='none'; //当前a标签的第二个子元素
        }
        /*鼠标离开时事件*/
        links[i].onmouseout=function(){
            for(var j=0;j<links.length;j++){
                links[j].children[1].style.display='none';
            }
        }
    }
    
  </script>
  
</body>
</html>